<!DOCTYPE html>
<html>
<head>
	
	<title><?php echo _MANAGER_TITLE_; ?></title>

	<?php $this->setFlag('list,vue'); ?>
	<?php $this->import('meta'); ?>

	<link rel="stylesheet" type="text/css" href="html/manager/account/css/rolelist.css" />

    <script type="text/javascript" src="html/manager/account/js/rolelist.js"></script>

</head>
<body>

	<div id="mainBg" class="bg" style="display: none;">

		<input type="text" id="tempid" class="display-none" />

        <div class="title-bar">
            <div class="title">角色管理</div>
            <button type="button" class="layui-btn btnAdd" onclick="addRole()">添加新角色</button>
        </div>

        <div class="query-bar">
        	<div class="search-left">
        		<select id="isuse" class="ddlist" onchange="queryKey('ddl')">
                    <option value="" selected="selected">全部状态</option>
                    <option value="1">启用</option>
                    <option value="0">关闭</option>
                </select>
                <select id="typeid" class="ddlist" onchange="queryKey('ddl')">
                    <option value="" selected="selected">全部类型</option>
                    <option value="0">管理岗</option>
                    <option value="1">运营岗</option>
                    <option value="2">研发岗</option>
                    <option value="3">试用岗</option>
                </select>
        	</div>
        	<div class="search-right">
        		<input type="text" id="keyword" class="keyword" placeholder="请输入角色名称" autocomplete="off" />
                <button type="button" class="btnOk" onclick="queryKey('ok')">确定</button>
        	</div>
        </div>

        <div class="tongji-bar">
        	<span class="tongji">共<span id="listCount" class="tc1"></span>个角色</span>
        </div>

        <div id="listBar" class="table-bar">
        	<table class="table-box">
        		<tr class="tr-head">
					<td class="td-head hw1">编号</td>
					<td class="td-head">权限ID</td>
					<td class="td-head hw2">名称</td>
					<td class="td-head hw2">类型</td>
					<td class="td-head hw1">状态</td>
					<td class="td-head hw1">顺序</td>
					<td class="td-head hw1">操作项</td>
					<td class="td-head hw2">操作</td>
				</tr>
				<tr class="tr-item" v-for="role in list">
					<td class="td-item-center hw1">{{ role.id }}</td>
					<td class="td-item-center">{{ role.roleid }}</td>
					<td class="td-item-center hw2">{{ role.name }}</td>
					<td class="td-item-center hw2">{{ role.type }}</td>
					<td class="td-item-center hw1">
						<template v-if="role.isuse == 1">
                    		启用
                    	</template>
                    	<template v-else-if="role.isuse == 0">
				            <span class="tc1">关闭</span>
				        </template>
				        <template v-else>
				            状态有误
				        </template>
					</td>
					<td class="td-item-center hw1">{{ role.sx }}</td>
					<td class="td-item-center hw1">
                        <span class="item-edit2" v-on:click="setOperate(role.roleid, role.name)">设置</span>
                    </td>
					<td class="td-item-center hw2">
                        <span class="item-edit" v-on:click="editRole(role.roleid)">编辑</span>
	                    <span class="item-delete" v-on:click="deleteRole(role.roleid, role.name)">删除</span>
					</td>
				</tr>
        	</table>
        </div>

        <?php $this->import('page'); ?>
        <?php $this->import('slipiframe'); ?>

        <script type="text/javascript">
        	var roleList = new Vue({
	            el: '#listBar',
	            data: {
	                list: ''
	            }
	        });
        </script>

	</div>

</body>
</html>